<template>

<div>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload">
    <img v-if="user_pic_mod" :src="user_pic_mod" class="avatar">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>

  <el-button type="primary" @click ="resetImg">重新上传头像</el-button>
  <el-button type="primary" @click ="upLoadImg" v-if="isbuttonUpLoad">确认上传头像</el-button>

  <div style="width:500px">

    <label for="nickname">昵称:
      <i class="el-icon-circle-check mod-div-i" v-if="nickname_i"></i>
        <el-popover placement="right" title="" width="200" trigger="hover" :content="nickname_tips">
        <el-input slot="reference" placeholder="请输入内容" v-model="nickname_mod" clearable id="nickname"></el-input>
      </el-popover>
    </label>

    <label for="email">电子邮箱:
      <i class="el-icon-circle-check mod-div-i" v-if="email_i"></i>
        <el-popover placement="right" title="" width="200" trigger="hover" :content="email_tips">
        <el-input slot="reference" placeholder="请输入内容" v-model="email_mod" clearable id="email"></el-input>
      </el-popover>
    </label>
  </div>

  <el-button type="primary" @click ="confirmMod">确认修改</el-button>
</div>

</template>


<script>
  export default {
    props:{
      username:{
        type:String,
        required:true
      },
      user_pic:{
        type:String,
        required:true
      },
      nickname:{
        type:String,
        required:true
      },
      email:{
        type:String,
        required:true
      },
      user_id:{
        type:Number,
        required:true  
      }
    },

    data() {
      return {
        user_pic_mod : this.user_pic,
        nickname_mod : this.nickname,
        email_mod : this.email,
        user_id_mod : this.user_id,

        nickname_tips : '您的昵称可以随意定制但是不能长度超过15字节',
        email_tips:'您的邮箱将作为您找回密码的唯一依据',

        nickname_i : false,
        email_i : false,

        isbuttonUpLoad : false,
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        //blob 转化 base64
        var reader = new FileReader()
          reader.readAsDataURL(file.raw)
          reader.onload = () => {
            // base64 存为 src 属性值并传入后端
            this.user_pic_mod = reader.result
          }
          reader.onerror = function (error) {
            console.log('Error: ', error)
          }
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        console.log(file);
        return isJPG && isLt2M;
      },

      resetImg(){
        this.user_pic_mod = ''
      },

      async confirmMod(){
        if(this.user_pic_mod != '' && this.nickname_mod !='' && this.email_mod != ''){
          const res = await this.$http.post('/my/userinfo',{
            id : this.user_id_mod,
            user_pic : this.user_pic_mod,
            nickname : this.nickname_mod,
            email : this.email_mod,
          })
          if(res.data.status===0){
            this.$message({
              message: '个人信息修改成功！！！',
              type: 'success'
            });
          }
        console.log(res.data);
        }
      },

      async upLoadImg(){
        if(this.user_pic_mod != ''){
          const res = await this.$http.post('/my/update/avatar',{
            id : this.user_id_mod,
            avatar : this.user_pic_mod,
          })
          console.log(res.data);
        }
      },
    },

    watch:{
      email_mod(){
        const str = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
          if(str.test(this.email))
            this.email_i = true
          else
            this.email_i = false
      },

      nickname_mod(){
        if(this.nickname_mod.length <= 15)
          this.nickname_i = true
        else 
          this.nickname_i = false
      },

      user_pic_mod(){
        if(this.user_pic_mod != 0){
          this.isbuttonUpLoad = true
        }
      }
    }
  }
</script>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
    margin-top: 78px;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .mod-div-i{
    color: forestgreen;
  }
</style>
